<template>
  <div style="display: inline-block;">
    <div @click="drawShow">
      <slot name="btnSlot"></slot>
    </div>

    <el-dialog
      ref="drawerBtn"
      :title="title"
      :visible.sync="isShow2"
      :close-on-click-modal="false"
      :width="size"
      :append-to-body="true"
      :withHeader="false"

     
      v-if="userInfoValue == '1'? true : false"
    >
      <el-container>
        <el-main class="contain">
          <el-row>
            <el-col>
              <slot></slot>
            </el-col>
          </el-row>
        </el-main>

        <el-footer v-show="btnShow == 'false' ? false : true">
          <el-row>
            <el-col class="text-c">
              <el-button @click="cancelForm">取 消</el-button>
              <el-button type="primary" @click="closeDrawer" :loading="loading">
                {{ loading ? "提交中 ..." : "确 定" }}
              </el-button>
            </el-col>
          </el-row>
        </el-footer>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    title: [String],
    size: [String],
    btnShow: [String],
    dialogTitle: [String],
    isShow: {
      type: Boolean,
      default: false,
    },
 
    userInfo: {
      type: Object,
      default() {
        return {
          val:"1",
          message:""

        };
      },
    },
  },
  data() {
    return {
      drawerBtn: false,
      direction: "rtl",
      loading: false,
      isShow2: false,
      userInfoValue:""
    };
  },
  mounted() {},
  methods: {
    drawShow() {
      
       this.$emit("drawShow");
      // if (this.userInfoValue == "1") {
      //   this.isShow2 = true;
       
        
      // } else {
      //   this.openMessage();
      // }
    },
    closeDrawer() {
      this.$emit("closeDrawer");
      // this.$emit("update:isShow", false);

      
  
    },

    cancelForm() {
      this.$emit("cancelForm");
      this.$emit("update:isShow", false);
  
   
    },
    //  消息提示对话框
    openMessage() {
      this.$alert(this.userInfo.message, "警告", {
        type: "warning",
        confirmButtonText: "关闭",
      });
    },

    getHomeInfo () {
        this.userInfoValue = this.userInfo.val;
        
        
      }

  },
  watch: {
    isShow(newVal) {
      this.isShow2 = newVal;
    },

    isShow2(newVal) {
      this.$emit("update:isShow", newVal);
    },
    userInfo(newVal){
      this.userInfoValue=newVal
    },
    userInfoValue(newVal,oldeValue){
    
      this.$emit("update:userInfo", newVal);
    },
    userInfo: {
        handler () {
          // 监听获取ajax数据
          this.getHomeInfo()
        },
        // 监听到数据变化时立即调用
        immediate: true
     }


  },
};
</script>
<style lang="scss" scoped>
.el-footer {
  // position: absolute;
  display: block;
  bottom: 5px;
  width: 100%;
}
.demo-drawer__footer {
  text-align: center;
  position: absolute;
  bottom: 0;
}
.demo-drawer__footer button {
  display: inline-block;
  width: 45%;
}
.el-drawer__header {
  display: none;
}
.contain {
  margin: 0;
}
.text-c {
  text-align: center;
  padding: 0.1rem 0.3rem;
}
.el-drawer__header {
  display: none;
}
</style>
